<template>
  <div :id="charts.chart.id" style="min-width: 300px; min-height: 300px"/>
</template>

<script>
import lodash from 'lodash'
import echarts from 'echarts'
// import {LinearGradient} from 'echarts/lib/util/graphic'
import charts from '@/components/Charts/mixin/charts'

export default {
  mixins: [charts],
  data() {
    return {
      charts: {
        chart: {
          id: lodash.uniqueId('chart_'), // 保证全局唯一的 id，避免一个页面多个图表时 id 冲突
          instance: null, // charts mixin 时会通过混入的方式初始化 echarts 实例到这个属性
          option: {
            title: {
              top: 20,
              text: 'Requests',
              textStyle: {fontWeight: 'normal', fontSize: 16},
              left: '1%'
            },
            tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#57617B'}}},
            legend: {
              top: 20,
              icon: 'rect',
              itemWidth: 14,
              itemHeight: 5,
              itemGap: 13,
              data: ['CMCC', 'CTCC', 'CUCC'],
              right: '4%',
              textStyle: {fontSize: 12}
            },
            grid: {top: 100, left: '5%', right: '5%', bottom: '5%', containLabel: true},
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLine: {lineStyle: {color: '#57617B'}},
              data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
            }],
            yAxis: [{
              type: 'value',
              name: '(%)',
              axisTick: {show: false},
              axisLine: {lineStyle: {color: '#57617B'}},
              axisLabel: {margin: 10, textStyle: {fontSize: 14}},
              splitLine: {lineStyle: {color: '#57617B'}}
            }],
            series: [
              {
                name: 'CMCC',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {normal: {width: 1}},
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: 'rgba(137, 189, 27, 0.3)'},
                      {offset: 0.8, color: 'rgba(137, 189, 27, 0)'}
                    ], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                  }
                },
                itemStyle: {normal: {color: 'rgb(137,189,27)', borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12}},
                data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
              },
              {
                name: 'CTCC',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {normal: {width: 1}},
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: 'rgba(0, 136, 212, 0.3)'},
                      {offset: 0.8, color: 'rgba(0, 136, 212, 0)'}
                    ], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                  }
                },
                itemStyle: {normal: {color: 'rgb(0,136,212)', borderColor: 'rgba(0,136,212,0.2)', borderWidth: 12}},
                data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
              },
              {
                name: 'CUCC',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {normal: {width: 1}},
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: 'rgba(219, 50, 51, 0.3)'},
                      {offset: 0.8, color: 'rgba(219, 50, 51, 0)'}
                    ], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                  }
                },
                itemStyle: {normal: {color: 'rgb(219,50,51)', borderColor: 'rgba(219,50,51,0.2)', borderWidth: 12}},
                data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
              }
            ]
          }
        }
      }
    }
  },
  methods: {}
}
</script>
